<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Edición de Markers</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<!--  script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
var map;
var infowindow = new google.maps.InfoWindow();
var markers = [];
function initialize() {
	var myLatlng = new google.maps.LatLng(-34.603333, -58.381667);
	var myOptions = {
		zoom: 12,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var randomnumber=Math.floor(Math.random()*11);
	$.getJSON('/obtenerMarkers.action?tt=' + randomnumber, function(data) {	
		for (var x in data){
			agregarMarker(data[x].latitud, data[x].longitud, data[x].nombre, data[x].descripcion, data[x].key.id);
		}
	});
}

function agregarMarker(latitud, longitud, nombre, descripcion, id){
	var latLng = new google.maps.LatLng(latitud, longitud);
	var marker = new google.maps.Marker({map: map, position: latLng});
	//markers.push(marker);
	google.maps.event.addListener(	marker, 
			'click', 
			function() {
				infowindow.close();
				var desc = "";
				if(descripcion != null){
					$.each(descripcion, function(key, val) {
						desc = desc + "<b>" + key + ": </b>" + val + "</br>";
					});					
				}
				var divTag = document.createElement("div");
				divTag.id = "div1";
				divTag.innerHTML = desc;
				infowindow.setContent(divTag);
				infowindow.open(map, marker);
				cargarContenido(descripcion, id);
			});
}

function cargarContenido(descripcion, id){
	var desc = "<form action='guardarDatos.action' method='post'>";
	desc = desc + "<div style='width:50%;position:absolute;top:0;left:0;'>Propiedad</div><div style='width:50%;position:absolute;top:0;right:0;'>Valor</div></br>";
	var x = 1;
	if(descripcion != null){
		$.each(descripcion, function(key, val) {
			keyId = "key_" + x; 
			valueId = "value_" + x;
			desc = desc + " <input type='text' value='" + key + "' id='"+ keyId +"' name='" + keyId +"'/>";
			desc = desc + " <input type='text' value='" + val + "' id='"+ valueId +"' name='" + valueId +"'/></br>";
			x++;
		});
	}
	for(x;x <= 10; x++){
		keyId = "key_" + x; 
		valueId = "value_" + x;
		desc = desc + " <input type='text' id='"+ keyId +"' name='" + keyId +"'/>";
		desc = desc + " <input type='text' id='"+ valueId +"' name='" + valueId +"'/></br>";
	}
	desc = desc + " <input type='hidden' id='capId' name='capId' value='" + id + "'/></br>";
	desc = desc + "<input type='submit' value='Guardar'/></form>";
	document.getElementById('content_window').innerHTML = desc;
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:70%; height:100%; float:left"></div>
  <div id="content_window" style="width:30%; height:100%; float:left;position:relative"></div>
</body>
</html>
